<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Tear卡密管理系统</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 引入 Bootstrap -->
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

</head>
<body>
<div class="container">
    <div class="row  clearfix">
        <div class="col-md-12 column">
            <table class="table table-hover talbe-striped">
<thead>
<tr>
    <th>用户ID</th>
    <th>用户名</th>
    <th>密码</th>
    <th>邮箱</th>
    <th>操作</th>

</tr>
</thead>
                <tr th:each="user:${users}">
<td th:text="${user.UserId}"></td>
                    <td th:text="${user.username}"></td>
                    <td th:text="${user.password}"></td>
                    <td th:text="${user.email}"></td>
                    <td>
                        <a class="btn btn-primary" th:href="@{/ToUpdate(id=${user.UserId})}" >更改</a> |
                        <a class="btn btn-primary" th:href="@{/Delete(id=${user.UserId})}" >删除</a>
<!--                        th:href如果为#为报错-->

                    </td>
                </tr>
            </table>

            <div class="form-group">
                <div class="col-sm-2  control-label">
                    <a href="/ToAdd" th:href="@{/ToAdd}"  class="btn btn-info">添加卡密</a>
                </div>
            </div>


            <ul class="pagination justify-content-end" style="float: right">
                <li class="page-item">
                    <a class="page-link" th:href="'index?pageNum='+${pageInfo.navigateFirstPage}">首页</a>
                </li>

                <!--上一页-->
                <li class="page-item">
                    <a class="page-link" th:href="'index?pageNum='+${pageInfo.prePage}">上一页</a>
                </li>

                <!--循环遍历显示中间的页数-->
                <li th:each="list:${pageInfo.navigatepageNums}">
                    <a th:href="'index?pageNum='+${list}" th:text="${list}"
                       th:if="${list!=pageInfo.pageNum}"></a>
                    <span style="font-weight: bold;background: #6faed9;"
                          th:if="${list == pageInfo.pageNum}" th:text="${list}" ></span>
                </li>
                <!--下一页-->
                <li class="page-item"    th:if="${pageInfo.hasNextPage}">
                    <a class="page-link" th th:href="'index?pageNum='+${pageInfo.nextPage}">下一页</a>

                </li>

                <!--尾页-->
                <li class="page-item">
                    <a class="page-link" th:href="'index?pageNum='+${pageInfo.navigateLastPage}">尾页</a>

                </li>
            </ul>

        </div>
    </div>
</div>

</body>
</html>